import React, { useState } from 'react'
import A from './components/A'
import B from './components/B'
export default function App() {
    let [count, setCount] = useState<number>(1);
    let [todos, setTodos] = useState([
        { id: 1, title: '吃饭', isDone: true },
        { id: 2, title: '睡觉', isDone: true }
    ]);

    return (
        <div>
            <p>count: {count}</p>
            <p><button onClick={() => {
                setCount(count + 1);
            }}>count++</button></p>

            <h3>不同的标签元素：重新渲染 【diff tag标签不同，直接认为是不同的节点】</h3>
            {count % 2 === 0 ? <div>我是div</div> : <span>我是span</span>}

            <h3>元素类型一致: 直接复用</h3>
            {<div className={count % 2 === 0 ? "after" : "before"} title="stuff" >123123</div>}

            <h3>标签名相同，但组件不同，直接重新渲染</h3>
            {count % 2 === 0 ? <A /> : <B />}

            <h3>key</h3>
            {/* 
                key 最好是不重复的唯一标识 ==> id, 最好的
                index    某些情况下没有id，也可以考虑使用索引
                    1. 单纯做列表显示
                    2. 向后追加
                    3. 不能用的情况：向前追加或删除、中间追加或删除
             */}
            <p><button onClick={()=>{
                setTodos([
                    {id:99, title:'前', isDone:false},
                    ...todos
                ])
            }}>向前追加</button></p>
            <p><button onClick={()=>{
                setTodos([
                    ...todos,
                    {id:100, title:'后', isDone:false}
                ])
            }}>向后追加</button></p>
            <ul>
                {todos.map((todo, index) => (
                    <li key={todo.id}>{todo.title} <input /></li>
                ))}
            </ul>
        </div>
    )
}
